<template>
  <div class="goodsedit">
    <div class="short" @click="toggleDrawer">
      <div class="image">
	<img :src="properties.base64"/>
      </div>

      <div class="properties">
	<div class="name"> {{properties.name}} </div>
	<div class="price"> {{properties.price}} </div>
	<div class="typename"> {{properties.typename}}</div>
	<div v-show="tokendown">已下架</div>
      </div>
    </div>

    <Drawer v-model="showDrawer" title="编辑" direction="bottom-top">
      <template #default>
	<div class="form">
	  <div class="image">
	    <ImageUpload :default-src="properties.base64" @submit="upload"/>
	  </div>

	  <div class="properties">
	    <span>商品名称</span>
	    <input type="name" v-model="properties.name">
	    <span>价格</span>
	    <input type="number" v-model="properties.price">
	    <span>库存</span>
	    <input type="number" v-model="properties.stock">
	    <span>类型</span>
	    <select v-model="properties.typename">
	      <!-- TODO options here -->
	      <template v-for="(option, index) in goodstypes" :key="index">
		<option :value="option.name" @click="selectValue(option.id)">{{option.name}}</option>
	      </template>
	    </select>

	    <span>描述</span>
	    <textarea v-model="properties.desc"/>
	  </div>
	</div>
      </template>

      <template #footer>
	<span>
	  <button class="cancel" @click="cancelDrawer">Cancel</button>
	  <button class="submit" @click="submitDrawer">Submit</button>
	</span>
      </template>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
 import Drawer from '@/components/Drawer.vue'
 import ImageUpload from '@/components/ImageUpload.vue'
 import { updateOneGoods, uploadImage } from '@/service';
 import { inject, Ref, ref } from 'vue';

 const props = defineProps({
   id:        {type: Number, required: true},
   name:      {type: String, required: true},
   price:     {type: Number, required: true},
   stock:     {type: Number, required: true},
   typename:  {type: String, required: true},
   typeid:    {type: Number, required: true},
   desc:      {type: String, required: true},
   tokendown: {type: Boolean, required: true},
   base64:    {type: String, required: true},
   filename:  {type: String, required: true}
 })

 const showDrawer = ref(false)
 const properties = ref({...props})
 const goodstypes = inject('GoodsTypes') as Ref<GoodsType []>
 const imageFile = ref<File | null>(null)
 const filename = ref(props.filename)
 const selectedTypeId = ref(props.typeid)
 function toggleDrawer() {
   showDrawer.value = true
 }

 function selectValue(index: number) {
   selectedTypeId.value = index
 }

 function upload(file: File) {
   // file to string
   let reader = new FileReader();
   reader.readAsDataURL(file);
   reader.addEventListener('load', function() {
     let result = this.result as string
     properties.value.base64 = result
     imageFile.value = file
   })

   filename.value = file.name
   // properties.value['filename'] = file.name
 }

 function cancelDrawer() {
   properties.value = {...props}
   showDrawer.value = false
 }

async function submitDrawer() {
   showDrawer.value = false
   let goods = properties.value
   delete goods.base64

   let newgoods = {...goods, filename: filename.value, typeid: selectedTypeId.value}
   await updateOneGoods(newgoods)
   properties.value = {...newgoods, base64: goods.base64}

   await uploadImage(imageFile.value!)

   let reader = new FileReader()
   reader.readAsDataURL(imageFile.value!);
   reader.addEventListener('load', function() {
     let result = this.result as string
     properties.value.base64 = result
   })

 }
</script>

<style lang="scss" scoped>
 div.short {
   display: flex;
   justify-content: space-around;
   align-items: center;
   border: 1px solid black;

   div.image {
     img {
       width: 100px;
       height: 100px;
     }
   }
 }

 div.form {
   display: flex;
   justify-content: space-around;
   div.properties {
     display: grid;

     grid-template-columns: repeat(2, 50%);
   }
 }
</style>